<!--
 * @Author: 宋杰
 * @Date: 2020-12-28 14:06:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-28 14:38:20
 * @Description: 一家十一口(猜一字) 注册页面
-->
<template>
  <div class="div1">
    <div class="head">
      <span class="navbar-brand">
        <img src="../../static/img/logo.png" />
      </span>
    </div>
    <div class="div2">
      <div class="topbox">
        机构注册
      </div>
      <div class="conbox">
        <!-- 进度条 -->
        <div class="biaoti">
          <el-steps :active="active" align-center>
            <el-step title="填写资料"></el-step>
            <el-step title="信息登录"></el-step>
            <el-step title="材料上传"></el-step>
          </el-steps>
        </div>

        <!-- 第一步 -->
        <div class="conbox1" v-show="show == 0">
          <el-form
            ref="form"
            :model="fillForm"
            label-width="120px"
            class="formbox"
          >
            <el-form-item label="单位性质">
              <!-- 机构 、学校 -->
              <el-select v-model="fillForm.value">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单位名称">
              <el-input v-model="fillForm.unitname"></el-input>
            </el-form-item>
            <el-form-item label="社会信用码">
              <el-input v-model="fillForm.CreditCode"></el-input>
            </el-form-item>
            <el-form-item label="管理员名称">
              <el-input v-model="fillForm.administrator"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱">
              <el-input v-model="fillForm.email"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                v-model="fillForm.password"
                placeholder="输入8-16位包含数字和字母"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="fillForm.phone"></el-input>
            </el-form-item>
            <el-form-item prop="smscode" class="code" label="短信验证码">
              <el-input
                v-model="fillForm.smscode"
                placeholder="验证码"
              ></el-input>
              <el-button
                type="primary"
                :disabled="fillForm.isDisabled"
                @click="sendCode"
                >{{ fillForm.buttonText }}</el-button
              >
              <el-button type="info">重新发送</el-button>
            </el-form-item>
          </el-form>
          <!-- 协议 -->
          <div class="xieyibox">
            <el-button
              plain
              type="primary"
              icon="el-icon-check"
              class="xieyibtn"
            ></el-button>
            <span>我同意并遵守</span
            ><span class="xieyicon">《用户注册协议》</span>
          </div>
        </div>
        <!-- 第一步end -->

        <!-- 第二步 -->
        <div class="conbox1" v-show="show == 1">
          <el-form
            ref="form"
            :model="loginForm"
            label-width="120px"
            class="formbox"
          >
            <el-form-item label="法人姓名">
              <el-input v-model="loginForm.corporate"></el-input>
            </el-form-item>
            <el-form-item label="法人身份证">
              <el-input v-model="loginForm.IDcard"></el-input>
            </el-form-item>
            <el-form-item label="办学许可证">
              <el-input v-model="loginForm.Schoolpermit"></el-input>
            </el-form-item>
            <el-form-item label="收费许可证">
              <el-input v-model="loginForm.Chargingpermit"></el-input>
            </el-form-item>
            <el-form-item label="教师队伍">
              <div class="jiaoshibox">
                <el-link type="warning"
                  ><span>教师队伍表格.doc</span><i class="el-icon-download"></i
                ></el-link>
                <el-button type="primary" plain>上传</el-button>
              </div>
            </el-form-item>
            <el-form-item label="办公面积">
              <el-input
                v-model="loginForm.Officespace"
                placeholder=""
              ></el-input>
            </el-form-item>
            <el-form-item label="教学面积">
              <el-input v-model="loginForm.Teachingarea"></el-input>
            </el-form-item>
            <el-form-item label="经营内容">
              <div class="jiaoshibox">
                <el-link type="warning"
                  ><span>经营内容表格.doc</span><i class="el-icon-download"></i
                ></el-link>
                <el-button type="primary" plain>上传</el-button>
              </div>
            </el-form-item>
            <el-form-item label="省市选择">
              <el-cascader
                style="width:356px"
                :options="optionsAddress"
                v-model="loginForm.selectedOptions"
                @change="handleChange"
                placeholder="请选择地址"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址">
              <el-input v-model="loginForm.name"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <!-- 第二步end -->

        <!-- 第三部 -->
        <div class="conbox1" v-show="show == 2">
          <el-form
            ref="form"
            :model="uploadedForm"
            label-width="120px"
            class="formbox"
          >
            <el-form-item
              label="营业执照"
              prop="age"
              :rules="[{ required: true, message: '不能为空' }]"
            >
              <!-- 营业执照 -->
              <div class="jiaoshibox">
                <el-upload
                  action="#"
                  list-type="picture-card"
                  :auto-upload="false"
                  ref="uploadBox"
                >
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file" slot-scope="{ file }">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    />
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in"></i>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                        <i class="el-icon-download"></i>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
                <el-button
                  plain
                  size="small"
                  type="primary"
                  @click="submitUpload"
                  >点击上传</el-button
                >
                <!-- 营业执照 -->
              </div>
            </el-form-item>

            <el-form-item
              label="法人身份证"
              prop="age"
              :rules="[{ required: true, message: '不能为空' }]"
            >
              <!-- 法人身份证 -->
              <div class="jiaoshibox">
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="FRhandlePreview"
                  :on-remove="FRhandleRemove"
                  :before-remove="FRbeforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="FRhandleExceed"
                  :file-list="FRfileList"
                >
                  <el-button plain size="small" type="primary"
                    >点击上传</el-button
                  >
                </el-upload>
                <!-- 法人身份证 -->
              </div>
            </el-form-item>

            <el-form-item label="其他补充材料">
              <!-- 其他补充材料 -->
              <div class="jiaoshibox">
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="QThandlePreview"
                  :on-remove="QThandleRemove"
                  :before-remove="QTbeforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="QThandleExceed"
                  :file-list="QTfileList"
                >
                  <el-button plain size="small" type="primary"
                    >点击上传</el-button
                  >
                </el-upload>
                <!-- 其他补充材料 -->
              </div>
            </el-form-item>
          </el-form>
        </div>
        <!-- 第三部end -->

        <!-- 提交按钮 -->
        <el-button type="primary" class="tijiaobutton" @click="tijiaoClick">{{
          tijiaotext
        }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode
} from "element-china-area-data"; //三级联动地址

export default {
  name: "",
  data() {
    return {
      show: 0, //切换注册页面
      active: 0, //步骤条
      tijiaotext: "下一步",
      // 第一步 填写资料 =============================
      // 单位性质选择
      options: [
        {
          value: "1",
          label: "学校"
        },
        {
          value: "2",
          label: "培训机构"
        },
        {
          value: "3",
          label: "企业单位"
        },
        {
          value: "4",
          label: "学会"
        },
        {
          value: "5",
          label: "培训中心"
        },
        {
          value: "6",
          label: "协会"
        }
      ],
      fillForm: {
        value: "1", //单位性质
        unitname: "", //单位名称
        CreditCode: "", //社会信用码
        administrator: "", //管理员
        email: "", //邮箱
        password: "", //密码
        phone: "", // 手机号
        smscode: "", //验证码
        buttonText: "发送验证码",
        isDisabled: false // 是否禁止点击发送验证码按钮
      },
      // 第一步 填写资料 end==============================

      // 第二步 信息登录 =================================
      loginForm: {
        corporate: "", // 法人姓名
        IDcard: "", //身份证
        Schoolpermit: "", //办学许可证
        Chargingpermit: "", //收费许可证
        teachingbody: "", //教师队伍
        Officespace: "", //办公面积
        Teachingarea: "", //教学面积
        Businesscontent: "", //经营内容
        address: "" //地址
      },
      //三级联动地址
      optionsAddress: regionData,
      selectedOptions: [], //省市区的编码
      // 第二步 end =======================================

      // 第三部 材料上传 ================================
      uploadedForm: {},
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      numberValidateForm: {
        age: ""
      },
      FRfileList: [], //法人身份证
      QTfileList: [] //其他材料
      // 第三部end ======================================
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    // <!--发送验证码-->
    sendCode() {
      // let tel = this.ruleForm2.tel;
      // if (this.checkMobile(tel)) {
      //   console.log(tel);
      //   let time = 60;
      //   this.buttonText = "已发送";
      //   this.isDisabled = true;
      //   if (this.flag) {
      //     this.flag = false;
      //     let timer = setInterval(() => {
      //       time--;
      //       this.buttonText = time + " 秒";
      //       if (time === 0) {
      //         clearInterval(timer);
      //         this.buttonText = "重新获取";
      //         this.isDisabled = false;
      //         this.flag = true;
      //       }
      //     }, 1000);
      //   }
      // }
    },

    // 第二步 =============================================
    handleChange(val) {
      console.log('val',val)
      let firstLevel = CodeToText[val[0]]; //第一级的地址文字
      let secondLevel = CodeToText[val[1]]; //第二级的地址文字
      let threeLevel = CodeToText[val[2]]; //第三级的地址文字
      this.loginForm.address =
        firstLevel + "/" + secondLevel + "/" + threeLevel;
      // 将区域码转换成汉字
      console.log("地址>>>", this.loginForm.address);
      // console.log('CodeToText',CodeToText['110000'])
    },
    // 第二步 end =============================================

    // 第三步 =====================================================
    // 营业执照
    submitUpload() {
      // 点击按钮触发上传图片得到点击事件
      // console.log(this.$refs.uploadBox.$children[1].$refs.input.click());
      this.$refs.uploadBox.$children[1].$refs.input.click();
    },
    // 删除
    handleRemove(file) {
      console.log(file);
    },
    // 处理图片卡预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 处理下载
    handleDownload(file) {
      console.log(file);
    },

    // 法人身份证
    // 删除
    FRhandleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 处理预览
    FRhandlePreview(file) {
      console.log(file);
    },
    // 处理超过
    FRhandleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    // 在删除之前
    FRbeforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    // 其他材料
    // 删除
    QThandleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 处理预览
    QThandlePreview(file) {
      console.log(file);
    },
    // 处理超过
    QThandleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    // 在删除之前
    QTbeforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 第三步end ============================================

    // 提交按钮
    tijiaoClick() {
      if (this.active < 3) {
        this.active++;
        this.show++;
      }
      if (this.active == 1) {
        console.log("fillForm", this.fillForm);
      } else if (this.active == 2) {
        console.log("loginForm", this.loginForm);
      } else if (this.active == 3) {
        console.log("uploadedForm", this.uploadedForm);
      }

      if (this.active == 2) {
        this.tijiaotext = "完成";
      }
      if (this.active == 3) {
        this.$router.push({ name: "institutions" });
      }
    }
  }
};
</script>
<style scoped>
.div1 {
  width: 100%;
}
.div2 {
  position: relative;
  background: #f5f6faff;
  margin: 0 auto;
  width: 50%;
  min-width: 700px;
  margin-top: 70px;
}
/* 机构注册 */
.topbox {
  height: 50px;
  line-height: 38px;
  padding: 0 20px;
  background: url(../../static/img/h1-bg.png) no-repeat;
  margin-left: -18px;
  color: #fff;
  font-size: 17px;
}
.conbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.conbox1 {
  width: 600px;
  min-width: 600px;
}
.conbox > .biaoti {
  width: 800px;
  min-width: 800px;
  margin: 30px 0;
}
/* 验证码 */
.code >>> .el-form-item__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.code button {
  margin-left: 20px;
  width: 140px;
  text-align: center;
}
/* 学校选择 */
.el-select {
  width: 356px;
}
.el-input {
  width: 356px;
}

/* 学校选择end */
/* 协议 */
.xieyibox {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.xieyibox > :nth-child(2) {
  margin-left: 10px;
}
.xieyibtn {
  width: 16px;
  height: 16px;
  padding: 0;
}
.xieyicon {
  color: rgb(93, 154, 247);
}
/* 下一步 */
.tijiaobutton {
  width: 200px;
  margin: 20px;
}

/* 第二步 */
.jiaoshibox {
  width: 356px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jiaoshibox > button {
  width: 80px;
}
/* 第二步 */
/* 第三步 */
.jiaoshibox > div > :nth-child(1) >>> li {
  width: 90px;
  height: 90px;
}
.jiaoshibox >>> .el-upload--picture-card {
  width: 90px;
  height: 90px;
  line-height: 90px;
}
.jiaoshibox >>> .el-upload__input {
  display: none;
}
.jiaoshibox >>> .el-upload-list__item-actions {
  display: flex;
  align-items: center;
}
.head {
  position: fixed;
  top: 0;
  background-color: #f5f6faff;
  text-decoration: none;
  width: 100%;
  z-index: 999;
  height: 52px;
}
.navbar-brand img {
  color: #f5f7fa;
  margin-top: -10px;
}
/* 第三步end */
</style>
